<!DOCTYPE html>
<html>
<head>
    <title>Charge Distribution</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="700" height="300"></canvas>
    <script>
        window.onload = function() {
            const canvas = document.getElementById('physicsCanvas');
            const ctx = canvas.getContext('2d');

            // --- Parameters ---
            const centerY = 150;
            const radius = 30;
            const spacing = 140; // Represents distance 'a'
            const numCharges = 4;
            const startX = (canvas.width - (numCharges - 1) * spacing) / 2;
            
            // --- Style Settings ---
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'black';
            const labelFont = "italic 32px 'Times New Roman'";
            const symbolFont = "30px 'Arial'";
            const ellipsisFont = "bold 30px 'Times New Roman'";

            // Function to draw a single charge
            function drawCharge(x, y, type) {
                // Draw the circle
                ctx.beginPath();
                ctx.arc(x, y, radius, 0, 2 * Math.PI);
                ctx.stroke();

                // Draw the sign (+ or -)
                ctx.font = symbolFont;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                if (type === '+') {
                    // Draw +
                    const signSize = radius * 0.6;
                    ctx.beginPath();
                    ctx.moveTo(x - signSize / 2, y);
                    ctx.lineTo(x + signSize / 2, y);
                    ctx.moveTo(x, y - signSize / 2);
                    ctx.lineTo(x, y + signSize / 2);
                    ctx.stroke();
                } else if (type === '-') {
                    // Draw -
                    const signSize = radius * 0.6;
                    ctx.beginPath();
                    ctx.moveTo(x - signSize / 2, y);
                    ctx.lineTo(x + signSize / 2, y);
                    ctx.stroke();
                }
            }

            // --- Drawing Logic ---

            const charges = ['+', '-', '+', '-'];
            const labelsBelow = ['e', '-e', 'e', '-e'];

            for (let i = 0; i < numCharges; i++) {
                const x = startX + i * spacing;
                
                // Draw the charge
                drawCharge(x, centerY, charges[i]);

                // Draw label 'e' or '-e' below
                ctx.font = labelFont;
                ctx.textAlign = 'center';
                ctx.textBaseline = 'top';
                ctx.fillText(labelsBelow[i], x, centerY + radius + 10);
                
                // Draw label 'a' above, between charges
                if (i < numCharges - 1) {
                    ctx.textBaseline = 'bottom';
                    const labelX = x + spacing / 2;
                    ctx.fillText('a', labelX, centerY - radius - 15);
                }
            }

            // Draw ellipses (...) to indicate infinite extension
            ctx.font = ellipsisFont;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            const ellipsisLeftX = startX - spacing * 0.6;
            ctx.fillText('...', ellipsisLeftX, centerY);
            
            const ellipsisRightX = startX + (numCharges - 1) * spacing + spacing * 0.6;
            ctx.fillText('...', ellipsisRightX, centerY);
        };
    </script>
</body>
</html>